<template>
  <div>
    <h1>题目一</h1>
    <div class="container">
      <div class="left-box" :style="'display:' + isMin"></div>
      <div class="right-box"></div>
    </div>
    <h1>题目二</h1>
    <el-button @click="searchSame">题目2</el-button>
    <h1>题目三</h1>
    <el-button @click="deepClone">题目3</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMin: 'block',
    }
  },
  mounted() {
    window.addEventListener('resize', this.changeDiv)
  },
  methods: {
    changeDiv() {
      let width = window.innerWidth
      if (width < 768) {
        this.isMin = 'none'
      } else {
        this.isMin = 'block'
      }
    },
    searchSame() {
      let strs = ['dog', 'racecar', 'car']
      let str1 = [...strs[0]]
      let str2 = [...strs[1]]
      let str3 = [...strs[2]]
      let sameStr = []
      str1.forEach((i, index) => {
        if (i === str2[index]) {
          sameStr.push(i)
        }
      })
      console.log(sameStr)
      let result = []
      sameStr.forEach((s, idx) => {
        if (s === str3[idx]) {
          result.push(s)
        }
      })
      console.log('最长公共前缀是' + result)
    },
    deepClone() {
      const oldObj = {
        name: 'john',
        age: 18,
        like: ['read', 'travel'],
        address: {
          city: 'beijing',
        },
      }
      let newObj = {}
      for (const k in oldObj) {
        console.log(k)
        // if (k === 'address') {
        // for (const a in oldObj[k]) {
        // this.$set(newObj.address, 'a', oldObj.address[a])
        // }
        // } else {
        this.$set(newObj, k, oldObj[k])
        // }
      }
      console.log(oldObj)
      console.log(newObj)
      this.$set(newObj.address, 'city', 'tianjin')
      console.log(oldObj)
      console.log(newObj)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;
  .left-box {
    width: 200px;
    height: 400px;
    background: pink;
  }
  .right-box {
    flex: 1;
    height: 400px;
    background: blueviolet;
  }
}
</style>
